<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<p id="fontFamily" style="font-family: serif">Font family.</p>
<p id="fontSize" style="font-size: 200%">Font size.</p>

<script>
  test(() => {
    let fontFamily = document.getElementById('fontFamily');
    let axFontFamily = accessibilityController.accessibleElementById('fontFamily');
    let initialFamily = axFontFamily.fontFamily;
    fontFamily.style.fontFamily = 'sans-serif';
    assert_not_equals(axFontFamily.fontFamily, initialFamily);
  }, 'Ensures that the font family can be dynamically changed.');

  test(() => {
    let fontSize = document.getElementById('fontSize');
    let axFontSize = accessibilityController.accessibleElementById('fontSize');
    assert_equals(axFontSize.fontSize, 32);
    fontSize.style.fontSize = '300%';
    assert_equals(axFontSize.fontSize, 48);
  }, 'Ensures that the font size can be dynamically changed.');
</script>
